<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<body>
    <button>1使用 cors 设置实现跨域</button>
    <button>2 jsonp实现跨域</button>
    <button>3 服务代理实现跨域</button>

    <button>4 发送post请求</button>
</body>
<script>
    let bts = document.querySelectorAll("button")
    //   方式一个 使用 cors 实现跨域 后端实现 后端一般是不会将cors设置的 
    //    因为这样所有的网站都可以访问 一般是想让自己的网站访问
    bts[0].onclick = function () {
        fetch("http://localhost:8080/index").then(function (res) {
            return res.json()
        }).then(function (res) {
            console.log(res);
        })
    }
    //   方式二 jsonp 实现 有局限 比如无法处理错误 只能发送get请求 不能post
    bts[1].onclick = function () {
        let node = document.createElement("script");
        //    jsonp 是路径  callback 请求成功后 的回调函数 后端调用
        node.src = "http://localhost:8080/jsonp?callback=foo"
        document.body.appendChild(node);
    }
    function foo(res) {
        console.log(res);
    }
    // 方式三 设置服务代理 先发送到 自己的 服务器(可以使用cors实现跨域)
    //  让 自己的服务器 发送请求  拿到数据在转发到 我们前端 
    bts[2].onclick = function () {
        fetch("http://localhost:5000/test/index").then(function (res) {
            return res.json()
        }).then(function (res) {
            console.log(res);
        })
    }
    // --------------------------- 处理POST---------------------
    bts[3].onclick = function () {
        //#region  fetch  发送post 请求
        fetch("http://localhost:8080/login", {
            method: "POST",//请求方式POST
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
            body: `name=张三`
        }).then((res) => {
            return res.json()
        }).then((data) => {
            console.log(data);
        })
        //#endregion
        // 使用jquery 发送post请求
        // 
        $.post("http://localhost:8080/login", "username='张三'",function(res){
            console.log(res);
        })
    }
</script>

</html>